<template>
  <div class="calendar">
    <div class="switch_box">
      <div class="inputs">
        <div>
          <input v-model="model.year">年
        </div>
        <div>
          <select v-model="model.month">
            <option :value="i" v-for="i in 12">{{ i }}</option>
          </select>月
        </div>
        <div>
          <input v-model="model.day">日
        </div>
      </div>
      <div>
        <div class="lunar_text">{{ I18n.getMessage('label.gongLi') }} {{ state.year }}{{ I18n.getMessage('label.nian')
          }}
          {{
            state.month
          }}{{ I18n.getMessage('label.yue') }} {{ state.day }}{{ I18n.getMessage('label.ri') }} {{
            I18n.getMessage('my.week') }}{{ state.weekInChinese }} {{ state.xingZuo }}{{ I18n.getMessage('my.xingZuo')
          }}
        </div>
        <div class="today">
          <a href="javascript:void(0);" class="prev" @click="prevDay"></a>
          {{ state.day }}
          <a href="javascript:void(0);" class="next" @click="nextDay"></a>
        </div>
        <div class="lunar_text">{{ I18n.getMessage('label.nongLi') }} {{ state.lunarYearInChinese }}{{
          I18n.getMessage('label.nian') }} {{ state.lunarMonthInChinese }}{{ I18n.getMessage('label.yue') }} {{
            state.lunarDayInChinese }}</div>
      </div>
    </div>
    <div class=""></div>
    <div class="grid border-bottom">
      <div class="col2 border-right">
        <div class="bar">{{ I18n.getMessage('label.caiShen') }}</div>
        <div>
          <div class="row col">
            <div class="label">喜神</div>
            <div>{{ state.positionXi }}</div>
          </div>
          <div class="row col">
            <div class="label">福神</div>
            <div>{{ state.positionFu }}</div>
          </div>
          <div class="row col">
            <div class="label">财神</div>
            <div>{{ state.positionCai }}</div>
          </div>
        </div>
      </div>
      <div class="col2">
        <div class="bar">{{ I18n.getMessage('label.yinYang') }}</div>
        <div>
          <div class="row col">
            <div class="label">阳贵神</div>
            <div>{{ state.positionYangGui }}</div>
          </div>
          <div class="row col">
            <div class="label">阴贵神</div>
            <div>{{ state.positionYinGui }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="grid">
      <div class="col2 border-right">
        <div class="bar">空亡所值</div>
        <div>
          <div class="row col">
            <div class="label">{{ I18n.getMessage('label.nian') }}</div>
            <div>{{ state.yearKongWang }}</div>
          </div>
          <div class="row col">
            <div class="label">{{ I18n.getMessage('label.yue') }}</div>
            <div>{{ state.monthKongWang }}</div>
          </div>
          <div class="row col">
            <div class="label">{{ I18n.getMessage('label.ri') }}</div>
            <div>{{ state.dayKongWang }}</div>
          </div>
        </div>
      </div>
      <div class="col2">
        <div class="bar">{{ I18n.getMessage('label.jiuGong') }}</div>
        <div>
          <div class="row col">
            <div class="label">九星</div>
            <div>{{ state.dayJiuXing }}</div>
          </div>
          <div class="row col">
            <div class="label">二十八宿</div>
            <div>{{ state.xiu }}</div>
          </div>
          <div class="row col">
            <div>{{ state.yearZhiShui }}</div>
            <div>{{ state.yearDeJin }}</div>
          </div>
          <div class="row col">
            <div>{{ state.yearFenBing }}</div>
            <div>{{ state.yearGenTian }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">

import { reactive, watch } from 'vue'
import { Solar, LunarYear, I18n } from 'lunar-typescript'
import { chs_setting, cht_setting, cht_setting_zero, en_setting } from './setting'

I18n.setMessages('chs', chs_setting)
I18n.setMessages('en', en_setting)
I18n.setMessages('cht', cht_setting)
I18n.setMessages('cht', cht_setting_zero)

const now = new Date()
const state = reactive({
  lang: I18n.getLanguage(),
  year: now.getFullYear(),
  month: now.getMonth() + 1,
  day: now.getDate(),
  yearGanZhi: '',
  yearShengXiao: '',
  yearNaYin: '',
  lunarYearInChinese: '',
  lunarMonthInChinese: '',
  lunarDayInChinese: '',
  yearZhiShui: '',
  yearGenTian: '',
  yearDeJin: '',
  yearFenBing: '',
  yearKongWang: '',
  monthGanZhi: '',
  monthShengXiao: '',
  monthNaYin: '',
  monthTaiShen: '',
  monthKongWang: '',
  dayGanZhi: '',
  dayShengXiao: '',
  dayNaYin: '',
  dayTaiShen: '',
  dayZhiShen: '',
  dayChong: '',
  dayTianShen: '',
  daySha: '',
  dayLu: '',
  dayJiShen: new Array<String>(),
  dayXiongSha: new Array<String>(),
  dayYi: new Array<String>(),
  dayJi: new Array<String>(),
  dayKongWang: '',
  dayJiuXing: '',
  prevJq: '',
  nextJq: '',
  pengZuGan: '',
  pengZuZhi: '',
  liuYao: '',
  yueXiang: '',
  yueMing: '',
  wuHou: '',
  weekInChinese: '',
  xingZuo: '',
  xiu: '',
  positionFu: '',
  positionCai: '',
  positionXi: '',
  positionYangGui: '',
  positionYinGui: ''
})

const model = reactive({
  year: '',
  month: '',
  day: ''
})

function render() {
  model.year = state.year + ''
  model.month = state.month + ''
  model.day = state.day + ''
  const solar = Solar.fromYmd(state.year, state.month, state.day)

  state.weekInChinese = solar.getWeekInChinese()
  state.xingZuo = solar.getXingZuo()

  const lunar = solar.getLunar()
  state.yearGanZhi = lunar.getYearInGanZhi()
  state.yearShengXiao = lunar.getYearShengXiao()
  state.yearNaYin = lunar.getYearNaYin()
  state.lunarYearInChinese = lunar.getYearInChinese()
  state.yearKongWang = lunar.getYearXunKong()

  state.monthGanZhi = lunar.getMonthInGanZhi()
  state.monthShengXiao = lunar.getMonthShengXiao()
  state.monthNaYin = lunar.getMonthNaYin()
  state.monthTaiShen = lunar.getMonthPositionTai()
  state.lunarMonthInChinese = lunar.getMonthInChinese()
  state.monthKongWang = lunar.getMonthXunKong()

  state.yueXiang = lunar.getYueXiang()
  state.wuHou = lunar.getHou() + ' ' + lunar.getWuHou()
  state.yueMing = lunar.getSeason()

  state.dayGanZhi = lunar.getDayInGanZhi()
  state.dayShengXiao = lunar.getDayShengXiao()
  state.dayNaYin = lunar.getDayNaYin()
  state.dayTaiShen = lunar.getDayPositionTai()
  state.pengZuGan = lunar.getPengZuGan()
  state.pengZuZhi = lunar.getPengZuZhi()
  state.dayZhiShen = lunar.getZhiXing()
  state.dayTianShen = lunar.getDayTianShen() + '(' + lunar.getDayTianShenType() + '日)'
  state.daySha = lunar.getDaySha()
  state.liuYao = lunar.getLiuYao()
  state.dayLu = lunar.getDayLu()
  state.dayJiShen = lunar.getDayJiShen()
  state.dayXiongSha = lunar.getDayXiongSha()
  state.dayYi = lunar.getDayYi()
  state.dayJi = lunar.getDayJi()
  state.lunarDayInChinese = lunar.getDayInChinese()

  const dayNineStar = lunar.getDayNineStar()
  state.dayJiuXing = dayNineStar.toString()

  const prevJq = lunar.getPrevJieQi(true)
  const prevJqSolar = prevJq.getSolar()
  state.prevJq = prevJq.getName() + '：' + prevJqSolar.toYmd() + ' ' + I18n.getMessage('my.zhou') + prevJqSolar.getWeekInChinese()

  const nextJq = lunar.getNextJieQi(true)
  const nextJqSolar = nextJq.getSolar()
  state.nextJq = nextJq.getName() + '：' + nextJqSolar.toYmd() + ' ' + I18n.getMessage('my.zhou') + nextJqSolar.getWeekInChinese()

  state.dayChong = lunar.getDayShengXiao() + '日冲' + lunar.getDayChongDesc()
  state.dayKongWang = lunar.getDayXunKong()

  state.xiu = lunar.getGong() + '方' + lunar.getXiu() + lunar.getZheng() + lunar.getAnimal() + '(' + lunar.getXiuLuck() + ')'

  state.positionXi = lunar.getPositionXiDesc()
  state.positionFu = lunar.getPositionFuDesc()
  state.positionCai = lunar.getPositionCaiDesc()
  state.positionYangGui = lunar.getPositionYangGuiDesc()
  state.positionYinGui = lunar.getPositionYinGuiDesc()

  const lunarYear = LunarYear.fromYear(lunar.getYear())
  state.yearZhiShui = lunarYear.getZhiShui()
  state.yearDeJin = lunarYear.getDeJin()
  state.yearGenTian = lunarYear.getGengTian()
  state.yearFenBing = lunarYear.getFenBing()
}

render()

function nextDay() {
  const solar = Solar.fromYmd(state.year, state.month, state.day).next(1)
  state.year = solar.getYear()
  state.month = solar.getMonth()
  state.day = solar.getDay()
  render()
}

function prevDay() {
  const solar = Solar.fromYmd(state.year, state.month, state.day).next(-1)
  state.year = solar.getYear()
  state.month = solar.getMonth()
  state.day = solar.getDay()
  render()
}

watch(() => model.year, () => {
  const year = parseInt(model.year, 10)
  if (!isNaN(year)) {
    state.year = year
    render()
  }
})

watch(() => model.month, () => {
  const month = parseInt(model.month, 10)
  if (!isNaN(month)) {
    state.month = month
    render()
  }
})

watch(() => model.day, () => {
  const day = parseInt(model.day, 10)
  if (!isNaN(day)) {
    state.day = day
    render()
  }
})

function setLang(lang: string) {
  state.lang = lang
  I18n.setLanguage(lang)
  render()
}
</script>
<style scoped lang="less">
.calendar {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  color: #222222;
  width: 100%;
  border: 2px solid #F6D07B;
  display: flex;
  flex-direction: column;

  .switch_box {
    border-bottom: 1px solid #F4C493;

    .inputs {
      position: relative;
      display: flex;
      padding: 20px;
      justify-content: center;
      align-items: center;

      div {
        position: relative;
        flex: 1;
      }

      input,
      select {
        border: 1px solid #D7D9E0;
        box-sizing: border-box;
        padding: 7px;
        border-radius: 6px;
        line-height: 1;
        position: relative;
        background: #FFFFFF;
        width: 80px;
        margin-right: 6px;
        text-align: center;
        font-size: 20px;
        outline: none;
      }

      select {
        appearance: none;
      }

    }

    .lunar_text {
      height: 60px;
      line-height: 60px;
      text-align: center;
      font-size: 18px;
    }

    .today {
      margin: 0 auto;
      width: 400px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      font-size: 100px;
      font-weight: bold;
      color: #BC2F3F;
      line-height: 120%;
      align-items: center;

      a {
        width: 0;
        height: 0;
        border: 30px solid transparent;
        font-size: 0;
        line-height: 0;
      }

      a.prev {
        border-right-color: #BC2F3F;
      }

      a.next {
        border-left-color: #BC2F3F;
      }
    }
  }

  .grid {
    height: 182px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    .col2 {
      flex: 1;
      width: 50%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;

      >div {
        flex: auto;
      }

      >div.bar {
        flex: none;
        width: 30px;
        margin-left: 20px;
      }

      div.label {
        color: #000000;
      }
    }
  }

  .bar {
    position: relative;
    width: 30px;
    height: 120px;
    color: #FFFFFF;
    text-align: center;
    background: #BC2F3F;
    display: flex;
    align-items: center;
    border-radius: 6px;
  }

  .bar::before,
  .bar::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #BC2F3F;
    margin-left: -8px;
  }

  .bar::after {
    top: auto;
    bottom: -6px;
  }
}
</style>